<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <treeLine :tree-data="titleData" :is-root="true" @addDepartments="addDepartments" />
        <hr>
        <!-- 树形结构 -->
        <el-tree
          :data="tissueList"
          :props="defaultProps"
          :default-expand-all="true"
        >
          <template #default="scope">
            <treeLine :tree-data="scope.data" :is-root="false" @delDepartments="getTissueList" @addDepartments="addDepartments" @editDepartments="editDepartments" />
          </template>
        </el-tree>
      </el-card>
    </div>
    <!-- 点击添加，弹窗组件 -->
    <addDepartments ref="addDept" :dialog-show="dialogShow" :curve-data="curveData" @addCancel="dialogShow = false" @addConfirm="addConfirm" />
  </div>
</template>

<script>
import treeLine from './components/treeLine.vue'
import addDepartments from './components/addDepartments.vue'
import { getTissueList } from '@/api/departments'
export default {
  components: {
    treeLine,
    addDepartments
  },
  data() {
    return {
      // 标题数据改造
      titleData: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      tissueList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 控制子组件dialog 显示和隐藏
      dialogShow: false,
      // 从树形子组件点击添加子部门，传值给dialog子组件
      curveData: {}
    }
  },
  mounted() {
    // 钩子函数
    this.getTissueList()
  },
  methods: {
    // 子组件弹出层点击 编辑 之后的父组件处理函数
    async editDepartments(data) {
      this.curveData = data
      await this.$refs.addDept.getDepartmentsDetails(data.id)
      this.dialogShow = true
    },
    // 子组件弹出层点击 确定 之后的父组件处理函数
    addConfirm() {
      this.dialogShow = false
      this.getTissueList()
    },
    // 封装 获取组织架构列表 函数
    async getTissueList() {
      const temp = (await getTissueList()).depts
      this.tissueList = this.handleData(temp, '')
    },
    // 处理组织列表数据函数
    handleData(list, pID) {
      const arr = []
      list.forEach(v => {
        if (v.pid === pID) {
          const temp = this.handleData(list, v.id)
          v.children = temp
          arr.push(v)
        }
      })
      return arr
    },
    // 树形结构点击 添加 子部门传过来的事件
    addDepartments(data) {
      this.dialogShow = true
      this.curveData = data
      // console.log(this.curveData)
    }
    //  dialog子组件点击取消传过来的事件
    // addCancel() {
    //   this.dialogShow = false
    // }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>

